<template>
    <el-dialog v-model="addDialog" title="修改" width="800">
        <el-form
            ref="updateFormRef"
            id="form"
            :model="updateForm"
            :rules="updateRules"
            label-width="auto"
            class="demo-infoForm"
        >
          <el-form-item label="组织ID" label-width="80" >
            <el-input  v-model="updateForm.id" readonly/>
          </el-form-item>
          <el-form-item label="组织名称" label-width="80" prop="organizationName">
            <el-input  v-model="updateForm.organizationName" />
          </el-form-item>
            <el-form-item label="组织地址" label-width="80" prop="organizationAddress">
                <el-input  v-model="updateForm.organizationAddress" />
            </el-form-item>
            <el-form-item label="联系电话" label-width="80" prop="organizationTel">
                <el-input  v-model="updateForm.organizationTel" />
            </el-form-item>
            <el-form-item label="组织描述" label-width="80" prop="organizationDesc">
                <el-input  v-model="updateForm.organizationDesc" />
            </el-form-item>
            <el-form-item label="组织网址" label-width="80" prop="organizationUrl">
                <el-input  v-model="updateForm.organizationUrl" />
            </el-form-item>
          <el-form-item label="成立日期" label-width="80" prop="establishDate">
            <el-input  v-model="updateForm.establishDate" readonly />
          </el-form-item>
          <el-form-item label="法人姓名" label-width="80" prop="legalPerson">
            <el-input  v-model="updateForm.legalPerson" />
          </el-form-item>
          <el-form-item label="状态" label-width="80" prop="status">
            <el-radio-group v-model="updateForm.status">
              <el-radio :value="1">启用</el-radio>
              <el-radio :value="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>

            <div class="dialog-footer">
                <el-button @click="addDialog = false">关闭</el-button>
                <el-button @click="submitForm(updateFormRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {defineModel, defineProps, toRaw} from "@vue/runtime-core";
    import {reactive} from "@vue/reactivity";
    import axios from '@/axios/index.js'
    import {ElMessage} from "element-plus";
    import {ref} from "vue";

    let form =defineProps(['updateForm']);

    let addDialog = defineModel('addDialog')

    let updateFormRef=ref()


    const updateForm = ref({
      id:form.updateForm.id,
      organizationName:form.updateForm.organizationName,
      organizationAddress:form.updateForm.organizationAddress,
      organizationTel: form.updateForm.organizationTel,
      organizationDesc: form.updateForm.organizationDesc,
      organizationUrl:form.updateForm.organizationUrl,
      establishDate:form.updateForm.establishDate,
      legalPerson:form.updateForm.legalPerson,
      status:form.updateForm.status,
    })

    //用户添加表单校验规则
    const updateRules = reactive({
      organizationName:[{ required: true, message: '请输入组织名称', trigger: 'blur'},],
      organizationAddress:[{ required: true, message: '请输入组织地址', trigger: 'blur'}],
      organizationId:[{ required: true, message: '请输入联系电话', trigger: 'blur'}],
      organizationDesc:[{ required: true, message: '请输入描述', trigger: 'blur'}],
      organizationUrl:[{ required: true, message: '请输入官网', trigger: 'blur'}],
      establishDate:[{ required: true, message: '请输入成立日期', trigger: 'blur'}],
      legalPerson:[{ required: true, message: '请输入法人', trigger: 'blur'}],
      status:[{ required: true, message: '请输入状态', trigger: 'blur'}],
      organizationTel:[{ required: true, message: '请输入状态', trigger: 'blur'}],
    })


    //添加用户角色
    const submitForm =(formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
          if (valid) {
            axios.post('/organization/update',JSON.stringify(updateForm.value),{headers: {'content-type': 'application/json'}}
            ).then(resp=>{
              ElMessage({
                message: resp.data.message,
                type: 'success',
                duration: 1500
              })
               addDialog.value= false
            })
        }
      })
    }

</script>

<style scoped>

</style>